<template>
    <div>
      
      <h2>附近店铺</h2>
        <input type="text" placeholder="标题" v-model="title">
        <input type="text" placeholder="图片" v-model="image">
        <button @click="handAddClick">新增</button>

      <div v-for="item in list" :key="item.id">
        <van-swipe-cell>
            <van-card
                :title="item.title"
                class="goods-card"
                :thumb="item.img"
            />
            <template #right>
                <van-button square text="删除" type="danger" class="delete-button" @click="deleteDate(item.id)" />
            </template>
        </van-swipe-cell>
      </div>
    </div>
  </template>
  
  <script setup>
  import axios from 'axios'
  import { onMounted, ref } from 'vue';
  
  // 定义一个数组
  const list = ref([])
  const title = ref('')
  const image = ref('')

//   新增事件
const handAddClick = () =>{
    axios.post('/api/list', {
        title: title.value,
        img: image.value
    }).then(res =>{
        getDate()
    })
}

//   删除数据
const deleteDate = (id) =>{
    axios.delete('/api/list/' + id).then(res =>{
        // 删除成功后，重新请求列表数据
        getDate()
    })
}
  

//   获取页面数据
  const getDate = () =>{
    axios.get('/api/list').then(res =>{
      console.log(res);
      if(res.status === 200){
        list.value = res.data
      }
    })
  }
  
  onMounted(()=>{
    getDate()
  })
  
  </script>
  
  <style lang="scss" scoped>
    .goods-card {
        margin: 0;
        background-color: #fff;
    }

    .delete-button {
        height: 100%;
    }
  </style>
  